<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
#a1{
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#a2{
    width: 100px;
    height: 100px;
    border: 1px solid green;
}

    </style>
</head>
<body>
    <div id="app">
        <div  id="a1" v-if="vip===10"></div>
        <button @click="vip++">第一题</button>
        <div  id="a2" v-if="vip2%2===0"></div>
        <button @click="vip2++">第二题</button>
        <!-- 实现一个步进器 （购物车的加减）.   
        如果数量等于1时，减少按钮变成灰色不可点击状态，
        如果数量大于等于10时，增加按钮变成不可点击状态。 -->
        <div id="a3">
            <button :disabled="a <= 1" @click="dec">--</button>
            <h1 v-if="a>=1&&a<=10">{{a}}</h1>
            <button :disabled="a >= 10" @click="add">++</button>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const {createApp,ref} = Vue;
    createApp({
        setup(){
            let vip=ref(0)
            let vip2=ref(0)
            let a=ref(1)
            function add(){
                a.value++;
            }
            function dec(){
                    a.value--;  
            }
            return{
                vip,
                vip2,
                a,
                add,
                dec
            }
        }
    }).mount('#app')
</script>
</html>